<template>
  <div class="app-container">
    <div ref="refsTable" >
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">

        <el-form-item label="迟发时间">
          <el-date-picker v-model="dateRange" style="width:370px" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
            range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>

        <el-form-item label="项目类型" prop="projectTypeId">
          <el-autocomplete
            class="inline-input"
            v-model="queryParams.projectType"
            :fetch-suggestions="querySearch"
            placeholder="请选择"
            @select="handleSelectProject"
            @focus="change(1)"
            style="width:190px"
            clearable
          ></el-autocomplete>
          <!-- <el-select v-model="queryParams.projectTypeId" placeholder="全部" clearable style="width:190px">
            <el-option value label="全部"></el-option>
            <el-option v-for="item in projectTypeList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select> -->
        </el-form-item>
        <el-form-item label="条形码" prop="barcodeCode">
          <el-input v-model="queryParams.barcodeCode" placeholder="请输入条形码" clearable style="width:190px"
            @keyup.enter.native="handleQuery" />
        </el-form-item>

        <el-form-item label="实验编码" prop="experimentNumber">
          <el-input v-model="queryParams.experimentNumber" placeholder="请输入实验编码" clearable style="width:190px"
            @keyup.enter.native="handleQuery" />
        </el-form-item>

        <el-form-item label="关键字" prop="keyName">
          <el-input v-model="queryParams.keyName" placeholder="送检单位/送检名字" clearable style="width:196px"
            @keyup.enter.native="handleQuery" />
        </el-form-item>


        <el-form-item label="迟发状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="全部" clearable style="width:196px">
            <el-option value label="全部"></el-option>
            <el-option v-for="item in statusName" :key="item.id" :label="item.title" :value="item.id" />
          </el-select>
        </el-form-item>





        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8" type="flex" justify="space-between">
        <el-col :span="1.5">

        </el-col>
        <el-col :span="1.5">
          <!--        <el-button type="primary" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>-->
          <el-dropdown trigger="click">
            <el-button type="primary" size="mini">
              导出<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="handleExport('now')">导出当前</el-dropdown-item>
              <el-dropdown-item @click.native="handleExport('all')">导出全部</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </div>
    <el-table :row-class-name="rowStyle" border highlight-current-row v-loading="loading" :data="typeList"
      @selection-change="handleSelectionChange" :height="heights" :header-cell-style="{
        background: '#ebebeb'
      }">
      <el-table-column label="序号" align="center" type="index" />
      <af-table-column label="条码号" align="center" prop="barcodeCode" width="120" />
      <af-table-column label="项目类型" align="center" prop="projectTypeName" width="160" show-overflow-tooltip>
      </af-table-column>
      <af-table-column label="实验编号" align="center" prop="experimentNumber" width="200" />
      <af-table-column label="样本状态" align="center" prop="mainState" width="160" show-overflow-tooltipv>
        <template slot-scope="scope">
          {{ scope.row.mainState == 6 ? analyzeSubStateName[scope.row.mainState] : mainStateName[scope.row.mainState] }}
        </template>
      </af-table-column>
      <af-table-column label="预计报告时间" align="center" prop="expectedReportTime" />
      <af-table-column label="报告时长" align="center">
        <template slot-scope="scope">
          {{ scope.row.reportTime + '天' }}
        </template>
      </af-table-column>
      <af-table-column label="迟发状态" align="center" prop="status">
        <template slot-scope="scope">
          {{ scope.row.status === 0 ? '待审核' : '已审核' }}
        </template>
      </af-table-column>

      <af-table-column label="送检姓名" align="center" prop="submitName" />
      <af-table-column label="送检单位" align="center" prop="inspectionUnit" />
      <af-table-column label="平台类型" align="center" prop="platformTypeName" />
      <af-table-column label="核酸类型" align="center" prop="nucleicTypeName" />
      <af-table-column label="样本类型" align="center" prop="sampleTypeName" />
      <af-table-column label="迟发原因" align="center" prop="reasonContent" />
      <af-table-column label="申请人" align="center" prop="userName" />
      <af-table-column label="申请时间" align="center" prop="createTime" />

    </el-table>
    <div>
      <pagination   style="margin:0;padding: 0;" :total="total" :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>

  </div>
</template>

<script>
import { manageLateList } from "@/api/comprehensiveSearchManage/late"
import { professional } from "@/api/dictionary/systemDictionary/professional"
import { projectType } from "@/api/dictionary/systemDictionary/projectType"
import { sampleType } from "@/api/dictionary/systemDictionary/sampleType"
import { arr, Arr } from "@/utils/data.js";



export default {
  name: "late",
  data () {
    return {
      pickerOptions: {
        disabledDate(time){
          return time.getTime()>Date.now()
        },
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 预警数据
      typeList: [],
      // 专业组数据
      professionalList: [],
      // 项目数据
      projectTypeList: [],
      // 样本数据
      sampleTypeList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 状态数据字典
      statusOptions: [],
      // 登记日期范围
      dateRange: [],
      // 录入时间范围
      entryRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        barcodeCode: undefined,
        experimentNumber: undefined,
        keyName: undefined,
        projectTypeId: '',
        status: '',
      },
      mainStateName: {
        1: '已录入',
        2: '已登记',
        3: '已入库',
        4: '已提取',
        5: '已建库',
        6: '已测序',
        7: '已分析',
        8: '已初审',
        9: '已确认初审',
        10: '已复审',
        11: '已提交',
        12: '已上传',
        13: '不上传'
      },
      analyzeSubStateName: {
        0: '待分析',
        1: '分析中',
        2: '分析失败',
        3: '分析成功'
      },
      statusName: [
        {
          id: 0,
          title: '未审核'
        },
        {
          id: 1,
          title: '已审核'
        }
      ],
      heights: undefined,
      sampleTypeList2:[],
      projectTypeList2:[],
      restaurants: [],

    }
  },
  created () {
    Arr.sampleTypeArr.map(el=>{
      this.sampleTypeList2.push({
        value:el.name,
        id:el.id
      })
    })
   Arr.projectTypeArr.map(el=>{
      this.projectTypeList2.push({
        value:el.name,
        id:el.id
      })
    })  
    this.dateRange[0] = this.parseTime((new Date(new Date().toLocaleDateString()).getTime()))
    this.dateRange[1] = this.parseTime((new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 -1000))
    this.getList()
    this.otherList()
  },
  mounted () {
    this.$nextTick(() => {
      // 根据浏览器高度设置初始高度
      this.heights = window.innerHeight - this.$refs.refsTable.offsetHeight - 160
      // 监听浏览器高度变化，修改表格高度
      window.onresize = () => {
        this.heights = window.innerHeight - this.$refs.refsTable.offsetHeight - 160
      }
    })
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    // 多个下拉框的数据
    loadAll() {
      const array = [
        this.sampleTypeList2,
        this.projectTypeList2,
      ];
      return array;
    },
    handleSelect(item) {
      console.log(item);
    },
    // 聚焦下拉框时
    change(i) {
      this.restaurants = this.loadAll()[i];
      // console.log(this.restaurants);
    },
    /** 预警 */
    getList () {
      this.loading = true
      manageLateList(this.addParameter(this.queryParams, this.dateRange)).then(response => {
        this.typeList = response.rows
        this.total = response.total
        this.loading = false
      }
      )
    },
    addParameter (params, dateRange) {
      var search = params
      search.startLateTime = ""
      search.endLateTime = ""
      if (null != dateRange && '' != dateRange) {
        search.startLateTime = dateRange[0]
        search.endLateTime = dateRange[1]
      }
      return search
    },
    otherList () {
      professional().then(response => {
        this.professionalList = response.rows
      })
      projectType().then(response => {
        this.projectTypeList = response.rows
      })
      sampleType().then(response => {
        this.sampleTypeList = response.rows
      })
    },
    // 表单重置
    reset () {
      this.form = {
        pageNum: 1,
        pageSize: 20,
        barcodeCode: undefined,
        experimentNumber: undefined,
        remainingTime: undefined,
        professionalGroupId: undefined,
        sampleTypeId: undefined,
        projectTypeId: undefined
      }
      this.resetForm("form")
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.dateRange = []
      this.entryRange = []
      this.surplus = undefined
      this.timeUnit = undefined
      this.resetForm("queryForm")
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    /** 批量打印条码 */
    handleBatchBarcodePrinting () {
      const queryParams = this.queryParams
      this.$confirm('是否确认打印所有数据项的条码?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return BatchBarcodePrinting(queryParams)
      }).then(res => {
        console.log(res.rows, '1')
      })
    },
    /** 批量打印实验编号 */
    handleBatchExperimentNumberPrinting () {
      const queryParams = this.queryParams
      this.$confirm('是否确认打印所有数据项的实验编号?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return BatchExperimentNumberPrinting(queryParams)
      }).then(res => {
        console.log(res.rows, '2')
      })
    },

    // /** 导出按钮操作 */
    handleExport (e) {
      var different = ''
      var params = ''
      if (e === 'now') {
        different = '当前'
        params = this.queryParams //对应接口参数
      } else if (e === 'all') {
        different = '所有'
        params = null
      } else {
        return
      }
      let that = this
      let loading
      this.$confirm('是否确认导出' + different + '数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        loading = that.$loading({
          lock: true,
          text: '导出中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        manageLateList(params).then((response) => {
          let mydata = [
            [
              '序号',
              '条码号',
              '项目类型',
              '实验编号',
              '样本状态',
              '预发报告时间',
              '报告时长',
              '迟发状态',
              '送检姓名',
              '送检单位',
              '平台类型',
              '核酸类型',
              '样本类型',
              '迟发原因',
              '申请人',
              '申请时间'
            ],
            ...response.rows.map((item, index) => ([
              index + 1,
              item.barcodeCode,
              item.projectTypeName,
              item.experimentNumber,
              item.mainState == 6 ? that.analyzeSubStateName[item.mainState] : that.mainStateName[item.mainState],
              item.registrationTime,
              item.reportTime + '天',
              item.status === 0 ? '待审核' : '已审核',
              item.submitName,
              item.inspectionUnit,
              item.platformTypeName,
              item.nucleicTypeName,
              item.sampleTypeName,
              item.reasonContent,
              item.userName,
              item.createTime
            ]))
          ]
          let requireMerge = []
          that.$util.createxlsx({
            mydata,
            fileName: '迟发管理查询',
            dataList: response.rows,
            type: 'orderId',
            requireMerge,
            loading
          })
        })
      }).catch(function () { })
    },
    rowStyle ({ row }) {
      var arr = this.ids
      for (let i = 0; i < arr.length; i++) {
        if (row.id === arr[i]) {
          return "rowStyle"
        }
      }
    },
    
    handleSelectProject(item){
      this.queryParams.projectTypeId=item.id
    },
  }
}
</script>
<style scoped lang="scss">
.app-container {
  height: 85vh;
}

::v-deep .el-table__body tr.current-row>td {

  background: #a8d6fe !important;
}

::v-deep .rowStyle {
  background-color: #a8d6fe !important;
}

::v-deep .el-table__body tr:hover>td {
  background: #a8d6fe !important;
}

.el-form-item {
  margin-bottom: 10px !important;
}
.topDiv{
      
      ::v-deep .el-form-item__label {
      font-size:  12px;
      padding:0 5px 0 0 ;
    margin:0;
   
    }
    
    }
</style>
